Skip to content

♻️ refactor: 반응형 레이아웃 일관성 개선(브레이크포인트 추가)#120

Merged
LeeCh0129 merged 1 commit intodevelopfrom
refactor/chanho
Jun 22, 2025
Merged

♻️ refactor: 반응형 레이아웃 일관성 개선(브레이크포인트 추가)#120
LeeCh0129 merged 1 commit intodevelopfrom
refactor/chanho

Conversation

@LeeCh0129
Copy link
Copy Markdown

@LeeCh0129 LeeCh0129 commented Jun 22, 2025 •
edited by coderabbitai bot
Loading

📌 변경 사항 개요

사이드바와 나의 대시보드 페이지의 반응형 브레이크 포인트를 통일하여 376~683px 구간의 레이아웃 불일치 문제 해결

✨ 요약

  • 기존 mobile/tablet 브레이크포인트를 mobile-wide/tablet-wide로 변경
  • 사이드바와 메인 콘텐츠 영역의 일관된 레이아웃 구현
  • 모바일 구간에서 불필요한 UI 요소(왕관 아이콘) 숨김 처리

📝 상세 내용

브레이크포인트 변경

기존:

  • mobile: 0~375px
  • tablet: 376~744px
  • 376px~683px 구간에서 사이드바는 67px, 메인 콘텐츠는 160px 여백으로 불일치
    변경 후:
  • mobile-wide: 0~683px
  • tablet-wide: 684~1439px
  • 모든 화면 크기에서 사이드바와 메인 콘텐츠 여백 일치

수정된 컴포넌트들

사이드바 관련:

  • Sidebar.tsx: 사이드바 너비 및 내부 요소 브레이크포인트 통일
  • DashboardItem.tsx: 모바일에서 왕관 아이콘 숨김 처리

나의대시보드 관련:

  • page.tsx: 메인 콘텐츠 여백과 섹션 크기 조정
  • MyDashboardGrid.tsx: 그리드 레이아웃 및 페이지네이션 브레이크포인트 수정
  • MyDashboardCard.tsx: 카드 크기 및 텍스트 스타일 조정
  • AddDashboardCard.tsx: 버튼 크기 브레이크포인트 수정

초대받은 대시보드 관련:

  • InvitedDashboardTable.tsx: 테이블 레이아웃 브레이크포인트 통일
  • InvitedDashboardRow.tsx: 행 레이아웃 및 버튼 크기 조정
  • SearchInput.tsx: 검색창 높이 브레이크포인트 수정

🔗 관련 이슈

🖼️ 스크린샷

✅ 체크리스트

  • 브랜치 네이밍 컨벤션을 준수했습니다
  • 커밋 컨벤션을 준수했습니다
  • 코드가 프로젝트의 스타일 가이드라인을 준수합니다

💡 참고 사항

Summary by CodeRabbit

  • Style
    • 모든 대시보드 및 사이드바 컴포넌트에서 반응형 스타일의 브레이크포인트 클래스가 기존 "mobile" 및 "tablet"에서 "mobile-wide" 및 "tablet-wide"로 변경되었습니다.
    • 버튼, 카드, 테이블, 입력창, 사이드바 등 다양한 UI 요소의 크기, 여백, 폰트 크기 등 반응형 스타일이 새로운 브레이크포인트에 맞게 조정되었습니다.
    • 기능 및 동작에는 영향이 없습니다.

@LeeCh0129 LeeCh0129 self-assigned this Jun 22, 2025
@LeeCh0129 LeeCh0129 added the ♻️Refactor 리팩토링 label Jun 22, 2025
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Jun 22, 2025 •
edited
Loading

Walkthrough

이 변경 사항은 여러 컴포넌트의 CSS 클래스에서 반응형 스타일링을 담당하는 접두사 mobile 및 tablet을 각각 mobile-wide와 tablet-wide로 일괄적으로 교체합니다. 이는 화면 크기별 스타일 적용 기준점을 새롭게 맞추기 위한 것으로, 컴포넌트의 구조나 로직에는 영향을 주지 않습니다.

Changes

파일(들) 변경 요약
.../InvitedDashboardTable/InvitedDashboardRow.tsx, .../InvitedDashboardTable/InvitedDashboardTable.tsx, .../InvitedDashboardTable/SearchInput.tsx 모든 반응형 CSS 클래스 접두사를 mobile→mobile-wide, tablet→tablet-wide로 변경. 스타일링만 변경, 로직 불변.
.../MyDashboardGrid/AddDashboardCard.tsx, .../MyDashboardGrid/MyDashboardCard.tsx, .../MyDashboardGrid/MyDashboardGrid.tsx 버튼, 카드, 그리드 등에서 반응형 스타일 접두사를 tablet→tablet-wide, mobile→mobile-wide로 일괄 교체.
.../mydashboard/page.tsx 컨테이너, main, section, heading 등 주요 엘리먼트의 반응형 마진, 패딩, 폰트 사이즈 클래스 접두사를 mobile-wide, tablet-wide로 변경 및 순서 일부 조정.
.../shared/components/common/sidebar/DashboardItem.tsx, .../shared/components/common/sidebar/Sidebar.tsx 사이드바 및 대시보드 아이템의 반응형 스타일 접두사를 mobile-wide, tablet-wide로 변경. 일부 클래스 순서 조정.

Sequence Diagram(s)

생성할 만한 주요 제어 흐름 변화나 신규 기능이 없으므로 시퀀스 다이어그램은 생략합니다.

Possibly related PRs

  • CoPlay-FE/coplan#94: Tailwind 설정 및 글로벌 CSS에 mobile-wide, tablet-wide 브레이크포인트를 추가한 PR로, 이번 PR의 클래스 접두사 변경과 직접적으로 연관됩니다.
  • CoPlay-FE/coplan#102: InvitedDashboardTable 등 동일 컴포넌트의 반응형 리팩터 및 무한 스크롤 구조 변경을 포함하며, responsive 스타일링 개선이라는 점에서 관련성이 높습니다.

Suggested labels

🎨Style

Suggested reviewers

  • dkslel1225
  • yuj2n

Poem

🐰
반응형 옷을 새로 입고
mobile-wide, tablet-wide로
화면마다 딱 맞는 옷
토끼는 폴짝 뛰며 웃지
스타일 바꾼 오늘 밤
더 넓은 세상에서
대시보드 춤을 춰요!

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

npm error Exit handler never called!
npm error This is an error with npm itself. Please report this error at:
npm error https://github.com/npm/cli/issues
npm error A complete log of this run can be found in: /.npm/_logs/2025-06-22T17_09_26_580Z-debug-0.log

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5c91792 and 3ad9d88.

📒 Files selected for processing (9)
  • src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardRow.tsx (2 hunks)
  • src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx (7 hunks)
  • src/app/mydashboard/components/InvitedDashboardTable/SearchInput.tsx (1 hunks)
  • src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx (1 hunks)
  • src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx (2 hunks)
  • src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx (3 hunks)
  • src/app/mydashboard/page.tsx (1 hunks)
  • src/app/shared/components/common/sidebar/DashboardItem.tsx (1 hunks)
  • src/app/shared/components/common/sidebar/Sidebar.tsx (2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx (1)
src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx (1)
  • AddDashboardCard (7-31)
src/app/shared/components/common/sidebar/Sidebar.tsx (1)
src/app/shared/components/common/sidebar/CreateDashboardButton.tsx (1)
  • CreateDashboardButton (7-27)
src/app/mydashboard/page.tsx (1)
src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx (1)
  • MyDashboardGrid (10-120)
🔇 Additional comments (40)
src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx (1)

17-17: 반응형 클래스 적용 확인
tablet-wide와 mobile-wide 클래스가 의도한 대로 일관성 있게 적용되어 있습니다. 스타일 변경이 문제없이 반영되었습니다.

src/app/mydashboard/components/InvitedDashboardTable/SearchInput.tsx (2)

17-17: 외부 컨테이너 반응형 높이 조정 확인
mobile-wide:h-36이 추가되어 모바일 환경에서 높이가 적절히 조정됩니다. 의도대로 적용된 것으로 보입니다.

23-23: 입력 필드 반응형 스타일 적용 확인
mobile-wide:h-36, mobile-wide:text-14, mobile-wide:placeholder:text-14 클래스가 알맞게 추가되어 반응형 타이포그래피 및 높이 조정이 일관됩니다.

src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx (11)

53-53: 로딩 스켈레톤 검색창 높이 조정
mobile-wide:h-36 클래스가 로딩 스켈레톤 검색창에 올바르게 추가되어 일관된 반응형 동작이 보장됩니다.

56-56: 테이블 헤더 숨김 처리 확인
mobile-wide:hidden이 적용되어 mobile-wide 이하 뷰포트에서 헤더가 정확히 숨김 처리됩니다.

70-70: 스켈레톤 행 반응형 스타일 확인
스켈레톤 행에도 mobile-wide:rounded-8, mobile-wide:p-16 등 브레이크포인트 클래스가 일관되게 적용되었습니다.

85-85: 오류 메시지(타이틀) 반응형 폰트 크기
mobile-wide:text-12 클래스가 오류 메시지에 정확히 지정되어 있습니다.

88-88: 오류 상세 메시지 반응형 폰트 크기
mobile-wide:text-10 클래스가 두 번째 오류 메시지에 올바르게 적용되었습니다.

99-99: 빈 상태 아이콘 크기 조정
mobile-wide:size-60가 빈 상태 아이콘에 추가되어 모바일 기준 크기가 적절히 조정됩니다.

107-107: 빈 상태 텍스트 반응형 폰트 크기
mobile-wide:text-12 클래스가 빈 상태 텍스트에 정확히 반영되었습니다.

121-121: 성공 상태 헤더 숨김 처리
mobile-wide:hidden이 성공 상태 테이블 헤더에도 일관되게 적용되었습니다.

132-132: 테이블 바디 컨테이너 반응형 간격
mobile-wide:space-y-0 클래스가 테이블 바디 컨테이너에 정상 반영되었습니다.

136-136: 검색 결과 없음 텍스트 반응형 폰트 크기
mobile-wide:text-12 클래스가 검색 결과 없음 상태에도 정확히 적용되었습니다.

158-158: 데이터 로딩 완료 메시지 반응형 폰트 크기
mobile-wide:text-10 클래스가 모든 데이터 확인 메시지에 올바르게 추가되었습니다.

src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx (4)

25-25: 로딩 상태 레이아웃 반응형 클래스
로딩 섹션의 그리드/플렉스 컨테이너에 tablet-wide 및 mobile-wide 클래스가 일관되게 적용되어 있습니다.

33-33: 스켈레톤 카드 반응형 크기
스켈레톤 카드에도 tablet-wide:h-68, mobile-wide:h-58 등 브레이크포인트 기반 크기 지정이 정확히 반영되었습니다.

64-64: 성공 상태 레이아웃 반응형 클래스
성공 상태의 카드 컨테이너에도 tablet-wide:grid, mobile-wide:flex 등 반응형 레이아웃 클래스가 올바르게 추가되었습니다.

79-79: 페이지네이션 컨테이너 반응형 최대 너비
페이지네이션 섹션에 tablet-wide:max-w-[520px] 및 mobile-wide:max-w-[260px]가 일관되게 적용되었습니다.

src/app/shared/components/common/sidebar/DashboardItem.tsx (4)

21-21: 버튼 컨테이너 반응형 클래스
네비게이션 버튼에 mobile-wide 및 tablet-wide 기반 스타일이 정확히 적용되어 있습니다.

27-27: 컬러 도트 크기 반응형 조정
mobile-wide:size-12과 tablet-wide:size-6 클래스가 컬러 도트에 알맞게 추가되었습니다.

32-34: 대시보드 제목 숨김 처리
mobile-wide:hidden로 모바일 환경에서 제목을 숨기도록 일관성 있게 설정되었습니다.

38-38: 왕관 아이콘 반응형 처리
왕관 아이콘 컨테이너에 mobile-wide:hidden 및 tablet-wide:h-10 w-12 클래스가 올바르게 적용되었습니다.

src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx (2)

22-22: 클래스명 브레이크포인트 일관성 확인됨
tablet/mobile이 tablet-wide/mobile-wide로 올바르게 교체되었습니다.

33-33: 텍스트 크기 브레이크포인트 업데이트 적절
mobile:text-14 → mobile-wide:text-14, tablet:max-w-140 → tablet-wide:max-w-140 등 변경이 일관적으로 적용되었습니다.

src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardRow.tsx (4)

57-57: 테이블 레이아웃 브레이크포인트 변경 적용
mobile:hidden → mobile-wide:hidden으로 업데이트되어 데스크톱/태블릿 숨김 로직이 올바르게 반영됩니다.

73-73: 수락 버튼 브레이크포인트 네이밍 일관화
tablet:w-72 tablet:h-30 tablet:text-12 → tablet-wide:w-72 tablet-wide:h-30 tablet-wide:text-12로 정확히 대체되었습니다.

80-80: 거절 버튼 브레이크포인트 네이밍 일관화
수락 버튼과 동일하게 tablet-wide 접두사로 변경되어 스타일 일관성이 유지됩니다.

88-88: 모바일 카드 레이아웃 브레이크포인트 변경 적용
mobile:block → mobile-wide:block 및 hidden 조건이 정확히 조정되었습니다.

src/app/shared/components/common/sidebar/Sidebar.tsx (9)

55-57: 사이드바 기본 너비 브레이크포인트 업데이트
mobile:w-67 tablet:w-160 → mobile-wide:w-67 tablet-wide:w-160로 변경되어 반응형 일관성이 확보됩니다.

59-66: 로고 섹션 브레이크포인트 클래스 변경
로고 크기 및 보이기/숨김 기능이 mobile-wide/tablet-wide 접두사로 올바르게 전환되었습니다.

81-84: 대시보드 섹션 헤더 레이아웃 브레이크포인트 적용
상단 패딩 및 숨김 로직(hidden/mb-16)이 일관된 prefix로 변경되었습니다.

91-91: 모바일 전용 + 버튼 레이아웃 업데이트
mobile:flex → mobile-wide:flex으로 변경되어 원하는 화면 크기에서만 노출됩니다.

99-99: 스크롤 컨테이너 브레이크포인트 클래스 통일
space-y- spacing이 mobile-wide 및 tablet-wide prefix로 일관성 있게 적용되었습니다.

102-107: 로딩 상태 뷰 브레이크포인트 변경 검증
로딩 메시지 및 스피너에 대한 hide/show 로직이 새 prefix에 따라 정상 작동합니다.

110-110: 에러 상태 레이아웃 브레이크포인트 적용
에러 메시지 컨테이너 padding이 mobile-wide/tablet-wide prefix로 업데이트되었습니다.

127-136: 추가 로딩 스켈레톤 레이아웃 Prefix 일관성
스켈레톤 로더의 spacing, 크기, 숨김 로직이 모두 mobile-wide/tablet-wide로 변경되어 일관됩니다.

144-149: 더 이상 데이터 없음 메시지 브레이크포인트 업데이트
텍스트와 아이콘 노출 로직이 새 prefix에 맞게 조정되어 모바일과 태블릿에서 일관된 동작을 보장합니다.

src/app/mydashboard/page.tsx (3)

16-16: 메인 컨테이너 마진 브레이크포인트 변경
ml-67/ml-160 prefix가 mobile-wide/tablet-wide로 올바르게 적용되었습니다.

21-21: 본문 패딩 Prefix 일관성 확인
p-16/p-24이 mobile-wide/tablet-wide 접두사와 함께 정상 작동합니다.

25-27: 초대받은 대시보드 섹션 브레이크포인트 업데이트
섹션 너비, 패딩, 제목 크기가 모두 새 prefix로 일관되게 변경되었습니다.

✨ Finishing Touches
  • 📝 Generate Docstrings
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@LeeCh0129 LeeCh0129 merged commit 18a1ca8 into develop Jun 22, 2025
1 of 2 checks passed
This was referenced Jun 22, 2025
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@LeeCh0129 LeeCh0129

Labels

♻️Refactor 리팩토링

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@LeeCh0129